<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS - 字体图标</title>
  <style>
    body {
      padding: 0 40px;
    }
  </style>
</head>
<body>
  <h3>自定义字体图标</h3>
  <p>使用第3方字体图标库十分方便，但是在企业实际环境中总是会不可避免使用一些个性化的图标，这就要求开发者必须掌握自定义字体图标的方法。</p>
  <h4>第一步</h4>
  <p>准备矢量图标(svg 格式的图片)，需要 UI 同事帮忙处理</p>
  <h4>第二步</h4>
  <p>将准备好的矢量图标上传至字体图标生成平台，如 IcoMoon 或 iconfont</p>
  <h4>第三步</h4>
  <p>根据平台的操作引导完成字体文件的生成，并下载</p>
  <h4>第四步</h4>
  <p>将下载的字体文件包中的 xxx.css 和字体文件(fonts目录下)拷贝到开发目录</p>
  <h4>第五步</h4>
  <p>将 css 文件通过 link 标签引入网页中</p>
  <h4>第六步</h4>
  <p>每个图标都对应唯一的 类名 这类名添加到应用图标的标签中即可。</p>
</body>
</html>